<template>
    <div class="pay-wrapper">
        <div style="height: 70px;background-color: blue;display: flex">
            <div style="display: flex;justify-content: center;position: absolute;top: 23px">
                <i class="el-icon-arrow-left" style="color: white;z-index: 10000" @click="togoods"></i>
            </div>
            <div style="display: flex;align-items: center;width: 100%;justify-content: center">
                <span style="color: white;font-size: 18px">确认订单</span>
            </div>
        </div>
        <div class="pay-middle">
            <p style="margin-left: 10px">订单配送至:</p>
            <div style="font-size: 18px;display: flex;justify-content: space-between;margin-left: 10px;margin-right: 10px;">
                <p style="font-weight: bold">大连市大连大学</p>
                <i class="el-icon-arrow-right" style="font-size: 18px"></i>
            </div>
            <div style="display: flex;margin-left: 10px">
                <p>学生某</p>
                <p style="margin-left: 10px">12362596347</p>
            </div>
        </div>
        <div class="business-name">
            <p style="margin-left: 10px;font-weight: bold">不好吃面团(大连店)</p>
        </div>
        <div class="order-pay">
            <div style="display: flex;margin-left: 10px;margin-top: 10px">
                <div class="img-four">
                    <img src="../assets/04.png" alt="">
                </div>
                <div style="display: flex;align-items: center;margin-left: 10px">
                    <p>肉面团(好吃)</p>
                    <p style="margin-left: 10px">x2</p>
                    <p style="margin-left: 160px">￥20</p>
                </div>
            </div>
            <div style="display: flex;margin-left: 10px;margin-top: 10px">
                <div class="img-four">
                    <img src="../assets/05.png" alt="">
                </div>
                <div style="display: flex;align-items: center;margin-left: 10px">
                    <p>速面团(好吃)</p>
                    <p style="margin-left: 10px">x1</p>
                    <p style="margin-left: 160px">￥10</p>
                </div>
            </div>
            <div style="display: flex;justify-content: space-between; margin-left: 10px;margin-top: 10px">
                <p>配送费</p>
                <p style="margin-right: 27px">￥3</p>
            </div>
            <div class="footer-pay">
                <div style="flex: 2.5;display: flex;justify-content: center;align-items: center">
                    <p>￥30</p>
                </div>
                <div style="flex:1;display: flex;justify-content: center;align-items: center;background-color: #42b983"
                @click="topay">
                    <p>去支付</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "payPage",
        methods:{
            togoods(){
                this.$router.push('/business')
            },
            topay(){
                this.$router.push('/online')
            }
        }
    }
</script>

<style scoped>
    .pay-wrapper{
        width: 375px;
        height: auto;
    }
    .pay-middle{
        height: 80px;
        background-color: #2727ea;
        color: white;
        font-size: 12px;
        display: flex;
        flex-flow: column;
        justify-content: space-around;
    }
    .business-name{
        height: 40px;
        width: 375px;
        display: flex;
        align-items: center;
        font-size: 15px;
        border-bottom: 1px solid #e2d6d6;
    }
    .order-pay{
        height: auto;
        width: 375px;
        display: flex;
        flex-flow: column;
        font-size: 12px;
        color: gray;
    }
    .img-four img{
        width: 50px;
        height: 50px;
    }
    .footer-pay{
        height: 50px;
        width: 375px;
        background-color: gray;
        position: fixed;
        bottom: 0;
        display: flex;
        color: white;
        font-size: 16px;
        font-weight: bold;
    }
</style>
